<template>
  <div>
    <div class="step-container">
      <el-steps
        :active="active"
        align-center
        simple
        finish-status="wait"
        process-status="finish"
      >
        <el-step
          v-for="(step,index) in steps"
          :key="index"
          :title="step.title"
          :icon="step.icon"
          :description="step.description"
        />
      </el-steps>
    </div>
    <component
      :is="activeForm"
      :value="id"
      @saved="onSaved"
    >
      <template
        v-if="steps.length"
        #steps
      >
        <el-button
          v-if="active>0"
          @click="onPrev"
        >上一步</el-button>
        <el-button
          v-if="active<steps.length-1"
          @click="onNext"
        >下一步</el-button>
      </template>
    </component>
  </div>
</template>

<script>
import GoodsBaseForm from './GoodsBaseForm'
import GoodsParamsForm from './GoodsParamsForm'
import GoodsSubmitForm from './GoodsSubmitForm'
export default {
  name: 'GoodsForm',
  components: {
    GoodsBaseForm,
    GoodsParamsForm,
    GoodsSubmitForm
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    formData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      active: 0,
      primaryKeyId: 0,
      loading: true,
      steps: [
        {
          title: '基础信息',
          description: '编辑处理商品基本信息',
          icon: 'el-icon-edit',
          name: 'GoodsBaseForm'
        },
        {
          title: '商品参数',
          description: '编辑商品参数信息或参数模板',
          icon: 'el-icon-s-operation',
          name: 'GoodsParamsForm'
        },
        {
          title: '商品审核/入库',
          description: '完成商品信息编辑后提交系统审核或者加入商品库',
          icon: 'el-icon-coordinate',
          name: 'GoodsSubmitForm'
        }
      ],
      form: null
    }
  },
  computed: {
    activeForm() {
      return this.steps[this.active].name
    },
    id() {
      return this.primaryKeyId || this.$route.params.id || 0
    }
  },
  watch: {
    active(v, o) {
      console.log('active', v, o)
    }
  },
  created() {},
  mounted() {},
  methods: {
    onNext() {
      var active = this.active + 1
      if (active < this.steps.length) {
        this.active = active
        console.log('next', active)
      } else {
        this.active = this.steps.length - 1
        console.log('next overflow', this.steps.length - 1)
      }
    },
    onPrev() {
      var active = this.active - 1
      if (active >= 0) {
        this.active = active
      } else {
        this.active = 0
      }
    },
    onSaved(id, type) {
      console.log('ddd', id)
      console.log('this.active', this.active)
      this.primaryKeyId = id
      if (this.active < this.steps.length - 1) {
        this.onNext()
      } else {
        this.$router.replace({
          path: '/commodity/default/index',
          query: {
            type: type
          }
        })
      }
    },
    onSuccess(d) {
      console.log(d)
    },
    onSubmit(type) {
      console.log('submit!')
      this.$emit('submit', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.step-container {
  border-radius: 5px;
  margin-bottom: 32px;
}
</style>
